<template>
  <div>
    <div :class="[$style.search_box, $style.topSelect]">
      <SearchInput
        placeholder="车牌号"
        label="车牌号"
        style="margin-right:20px"
        :value="carNum"
        :onChange="(val) => changeSearch('carNum',val)"
        :onBlur="queryData"
      />
      <SearchInput
        placeholder="预约门店"
        label="门店名称"
        style="margin-right:20px"
        :value="storeName"
        :onChange="(val) => changeSearch('storeName',val)"
        :onBlur="queryData"
      />

      
      <div :class="$style.selectBox">
        <label>订单状态：</label>
        <el-select
          style="width:120px"
          v-model="status"
          :clearable="true"
          @change="queryData"
          placeholder="请选择"
        >
          <el-option label="不限" :value="undefined"></el-option>
          <el-option label="待接单" :value="1"></el-option>
          <el-option label="待接车" :value="2"></el-option>
          <el-option label="维修中" :value="3"></el-option>
          <el-option label="待评价" :value="4"></el-option>
          <el-option label="已完成" :value="7"></el-option>
        </el-select>
      </div>
      
      <div :class="$style.selectBox" style="margin-right:20px;display: flex;align-items: center;">
        <label>预约时间：</label>
        <el-date-picker
          v-model="appointmentTime"
          type="daterange"
          @change="queryData"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          style="height:40px"
        ></el-date-picker>
      </div>

    </div>

    <Panel :title="`用户订单（车主昵称：${userName || '无'}）`" useBack>
      <TableEncapsulation
        slot="body"
        :tableConfig="tableConfig"
        :tableData="tableData"
      >
        <template slot="operation" slot-scope="operation">
          <el-button
            type="text"
            @click="()=>orderDetail(operation.row.id)"
          >查看详情</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
      </TableEncapsulation>
    </Panel>
  </div>
</template>

<script>
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import SearchInput from "@/components/SearchInput";
import TablePager from "@/components/Pager";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import { baseUrl, timestampToTimeData, GET } from "@/tools";
import moment from 'moment'

export default {
  components: {
    Panel,
    TableEncapsulation,
    SearchInput,
    TablePager,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
         pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,
      tableData: [],
      phone: "",
      account: "",
      appointmentTime: '',
      nickName: "",
      storeName: '',
      userName: '',
      status: undefined,
      userId: '',
      carNum: '',
    };
  },
  computed: {
    tableConfig() {
      return {
        selection: false,
        columnConfig: [
             {
            label: "订单编号",
            type: "text",
            prop: "code",
            align: "center"
          },
          {
            label: "车辆类型",
            type: "other",
            prop: "carType",
            align: "center",
            fnc: val => val==1?'汽油/天然气车': val == 2 ? '柴油车' : '--'
          },
          {
            label: "车牌号",
            type: "text",
            prop: "carNum",
            align: "center"
          },
          {
            label: "预约门店",
            type: "text",
            prop: "storeName",
            align: "center"
          },
          {
            label: "订单状态",
            type: "other",
            prop: "status",
            align: "center",
            fnc: val => {
              if(val === 1){
                return "待接单"
              }else if(val === 2){
                return "待接车"
              }else if(val === 3){
                return "维修中"
              }else if(val === 4){
                return "待评价"
              }else if(val === 5){
                return "待评价"
              }else if(val === 6){
                return "已关闭"
              }else if(val === 7){
                return "已完成"
              }
            }
          },
          {
            label: "提交时间",
            type: "time",
            prop: "createTime",
            align: "center"
          },
          {
            label: "预约到店时间",
            type: "other",
            prop: "appointmentDate",
            align: "center",
            fnc:val=>{
                return moment(val).format('YYYY-MM-DD')
            }
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:200
          }
        ].filter(Boolean)
      };
    }
  },
  methods: {
    orderDetail(id){
      this.$router.push({path:'/orderDetail',query:{id}})
    },
    pageChange(val) {
      this.pager.current = val;
      this.pager.current=1
      this.queryData();
    },
    changeSearch(key,val) {
      this[key] = val;
      this.pager.current=1
    },
    async queryData() {
      const result = await GET('/user/order',{
        carNum: this.carNum,
        endTime: this.appointmentTime ? (this.appointmentTime[1] + 86400000) : undefined,
        startTime: this.appointmentTime ? this.appointmentTime[0] : undefined,
        pageNum: this.pager.current,
        pageSize: 10,
        
        status: this.status,
        storeName: this.storeName,
        userId: this.userId
      })
      this.tableData = result.records;
      this.$set(this.pager,'total',result.total>>>0)
    }
  },
  created() {
    const { userId, userName } = this.$route.query
    this.userId = userId
    this.userName = userName
    this.queryData();
  }
};
</script>

<style lang='scss' module>
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 36px;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.selectBox {
  :global {
    label {
      font-size: 14px;
      color: #666666;
      margin-right: 20px;
    }
    .el-input__inner {
      height: 32px!important;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime {
      width: 200px;
    }
  }
}
</style>